Functions!

Click Here For Video Review

Read the information on the left, then look at the examples on the right!


Examples of Functions in JavaScript
Functions only run code that is BETWEEN their brackets.
An alert creates a pop up window.

Look at the functions below, decide what you think will happen, then click on their Run button!

function good(){
alert("All is Well");
}



function bad(){

}
alert("All is Well");



There is no code between this functions brackets, so no code to run.

A function is a built in JavaScript command (meaning all browsers already know how to read them).
Functions are like containers of JavaScript code. They "contain" code between their curley bracket, { }.

Functions hold onto code until something tells them to run (execute) like:
Clicking the mouse,
Pressing a keyboard button,
or some other event like two things colliding in a game.

Functions always start with the word: function.
Next you give your function a name followed by parenthesis ( ).

The parenthesis are used if you want to give your function additional information like passing some variable (later lessons).


The brackets, { } tell the computer where the function starts and ends.
It's very important to know where each of your functions end!

See the function examples on the right.


When you understand this slide, Click the RIGHT ARROW to move on!


Easter Eggs!

Click Here For Video Review

Watch out for Easter Eggs!

You all probably know what Easter Eggs are in games.
They are perfect examples of some Triggering Event, causing a function to run it's code!


For a function to run it's code some event needs to happen.

In the last slide you clicked on a button.

Easter Eggs are things you discover in a games usually by triggering some event.
For example click here.

Remember that every function has a name. The name comes after the command function.

A function's name CAN'T have any:
» spaces
» start with a number.
» be the name of another JavaScript command like, function or alert.
You can trigger a function to run it's code by calling it's name.

There are a few different ways to call a function by it's name.

To start out you'll be calling functions from HTML tags by adding the triggering event equal to the function's name.

For Example:

<body onload="start()"> - This tells the browser that when it loads the body tag to also run a function named start!

Below are examples of other simple triggering events you could add to an HTML tag.
Do to them what they say! (Except onload, nothing happens with that one.)

onclick  |   onload  |  onmouseover  |   onmouseout



When you understand this slide, Click the RIGHT ARROW to move on!


Testing

Click Here For Video Review

Time to practice calling functions!

Read the instructions on the left to practice calling functions!


Notice the name of the function on line 5 is run().

Click on the Events below (in blue) to reveal instructions.
They will help you add the correct code to the Code Editor to the right.

onclick

  1. On line 12 add an onclick event to the u tag.
    Add it to editor on the right, see below (watch the video for help, try it yourself first though!):
    <u onclick="run()"> You can Do It!</u>
  2. Click the 'Run the Code' button in the bottom right.
  3. Click on the words 'You can Do It!'

onmouseover

  1. On line 12 add an onmouseover event to the u tag.
    Add it to editor on the right, it will look like this:
    <u onmouseover="run()"> You can Do It!</u>
  2. Click the 'Run the Code' button in the bottom right.
  3. Hover over the words 'You can Do It!'

onmouseout

  1. On line 12 add an onmouseout event to the u tag.
    Add it to editor on the right, it will look like this:
    <u onmouseout="run()"> You can Do It!</u>
  2. Click the 'Run the Code' button in the bottom right.
  3. Hover off of the words 'You can Do It!'

onload

  1. On line 10 add an onload event to the body tag.
    Add it to editor on the right, it will look like this:
    <body onload="run()">
  2. Click the 'Run the Code' button in the bottom right.
  3. The alert will load automatically!



When you understand this slide, Click the RIGHT ARROW to move on!


Activity

Click Here For Video Review

This Activity will walk you through:

  1. Creating your first function!
  2. Adding an event to trigger your function.
Read the next lines carefully!

    Now you will add code to your pong.html file. Make sure you have your pong.html file open in sublime text before you start!

  1. Between the EXISTING <script> </script> tags in your pong.html file, create a function named start()
    2. Hint <html>
    <head>
    <title> Pong </title>
    <script src="https://simplycodingcourses.com/files/simplyjs/simply.js"></script>
    <script>
    function start(){

    }
    </script>
    </head>
    <body>
    <h1> Pong Game </h1>
    <div id="target" style="margin:auto;background:grey;"></div>
    </body>
    </html>


    Only add the code in bold. (This goes for all HINTS)
    Don't add more script tags. Find the ones around lines 6 & 8. Remember the closing curley bracket!!!

  2. Between the brackets of function start(), add an alert call to create a pop up window. Have it say whatever you'd like!
    3. Hint <script>
    function start(){
    alert("My Game! Coming SOON!");
    }
    </script>

    Only add the code in bold!

    Now you need to add the code to 'call' your start function!

  3. Edit your EXISTING <body> tag to use the onload event and call your start function.
    1. This will load the code in function start() to the browser right when the page loads!
    Hint <html>
    <head>
    <title> Pong </title>
    <script src="https://simplycodingcourses.com/files/simplyjs/simply.js"></script>
    <script>
    function start(){
    alert("My Game! Coming SOON!");
    }
    </script>
    </head>
    <body onload="start()">
    <h1> Pong Game </h1>
    <div id="target" style="margin:auto;background:grey;"></div>
    </body>
    </html>

    Only add the code in bold.
    Don't add another body tag.

    Find your body tag in the pong.html file (around line 12) and edit it to look like the code above.
  4. Save your pong.html file, Hold down the CTRL key and press S to save.
    1. You'll need to save your code everytime you make a change, so get used to CTRL + S or Command + S if you're on a Mac.
    View Screenshot
  5. Load your pong.html file in the browser.
    6. Here are THREE ways to do this: Choose One!: follow either a, b, or c
    1. RIGHT CLICK on an open space inside Sublime Text and select Open in Browser.
      2. View Screenshot
    2. RIGHT CLICK on an open space inside Sublime Text and select Copy File Path, then open a new tab in the browser and paste (CTRL + V).
      3. View Screenshot 1.    2.
    3. DOUBLE CLICK on the file pong.html inside your Game Design > Pong folder.
      4. View Screenshot

When you open your game in the browser your alert pop up window should display your message!


Once you have everything setup correctly Click the Next button to move to the next Lesson!